<template>
<div class="login">
    <img src="../../assets/img/llllll.png" alt="" style="width: 495px;
    position: absolute;
    left: 50%;
    top: 29%;">
     <div class="login_area">
         <div class="title_login">
             <h2>登录</h2>
         </div>
         <div class="login_name">
             <a-input
                v-decorator="[
                'userName',
                { rules: [{ required: true, message: 'Please input your username!' }] },
                ]"
                v-model="username"
                placeholder="请输入账号"
            >
                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
         </div>
         <div class="login_pass">
             <a-input
                v-decorator="[
                'password',
                { rules: [{ required: true, message: 'Please input your Password!' }] },
                ]"
                type="password"
                v-model="password"
                placeholder="请输入密码"
                @keyup.enter.native="lllogin"
            >
                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
         </div>
         <a-checkbox
                v-decorator="[
                'remember',
                {
                    valuePropName: 'checked',
                    initialValue: true,
                },
                ]"
            >
                记住密码
            </a-checkbox>
        <a-button type="primary" html-type="submit" class="login-form-button" style="width:100%;margin:15px 0" @click="login">
            登 录
        </a-button>
     </div>
</div>
</template>
<script>
import {post} from '../../utils/axios'
export default {
	data() {
    return {
      username:'',
      password:'',
      checked: false
    }
  },
  methods: {
    login(){
        let username = this.username
        let password = this.password
        this.$axios.post('/trains/login/',{username,password}).then(res=>{
            let sessionId = localStorage.setItem('sessionId',res.token)
            let teacherornot = localStorage.setItem('teacherornot',res.is_teacher)
            this.$router.replace({path:'/banner'})
        })
        .catch(error=>{
            this.$message.error('账号或密码错误')
        })
    },
    lllogin(){
        this.login()
    }
  },
}
</script>
<style lang="less">
.login{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('../../assets/img/login_bg.jpg') no-repeat;
    background-size: 100% 100%;
    .login_area{
        width: 500px;
        position: absolute;
        left: 50%;
        top: 37%;
        padding: 90px;
        background: url('../../assets/img/login3.png') no-repeat;
        background-size: 100% 100%;
        .title_login{
            text-align: center;
            h2{
                    color: #06ABCF;
                    margin-bottom: 30px;
            }
        }
        .login_name ,.login_pass{
            margin: 10px 0 15px 0;
            i{
                font-size: 18px!important;
                color: #06ABCF!important;
            }
            .ant-input-affix-wrapper .ant-input:not(:first-child){
                padding-left: 36px!important;
                background: #1040AE;
                color: white;
                border: 0;
            }
        }
        .ant-checkbox + span{
             color: #06ABCF;
        }
    }
}
</style>